Day11. 輔助工具 Helper

14th鐵人賽 javascript three.js

Yingge170

團隊來啊!打摳啊!

2022-09-15 14:11:21

1258 瀏覽

分享至

Three.js提供了各種輔助工具幫助開發

ArrowHelper

用於可視化方向的3D箭頭
ArrowHelper(dir : Vector3, origin : Vector3, length : Number, hex : Number, headLength : Number, headWidth : Number )

Dir : 箭頭原點的方向
Origin : 箭頭開始的點
Length : 箭頭長度
Hex : 箭頭顏色
headLength : 箭頭的頭部長度
headWidth : 箭頭的頭部寬度

  const dir = new THREE.Vector3( 1, 2, 0 );

  dir.normalize();

  const origin = new THREE.Vector3( 0, 0, 0 );
  const length = 1;
  const hex = 0xffff00;

  const arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
  scene.add( arrowHelper )

AxesHelper

可以用來創建可視化三維坐標系，X軸為紅色，Y軸綠色、Z軸藍色，參數為座標軸大小。

let axesHelper = new THREE.AxesHelper(3)
scene.add(axesHelper)

BoxHelper

輔助物件圖形化顯示物件包圍盒

const sphere = new THREE.SphereGeometry();
const object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
object.position.set(6,1,1)
const box = new THREE.BoxHelper( object, 0xffff00 );
scene.add( box );
scene.add(object)

CameraHelper

可視化相機錐體

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const helper = new THREE.CameraHelper( camera ); 
scene.add( helper );

GridHelper

定義網格
GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )

Size : 網格大小
Divisions : 網格劃分數量
ColorCenterLine : 網格中心線顏色
ColorGrid : 網格線條顏色

const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper( size, divisions,0xff0000,0xffffff);
scene.add( gridHelper );

PolarGridHelper

定義極座標網格

const radius = 10;
const radials = 16;
const circles = 8;
const divisions = 64;

const helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );